<template>
  <el-container style="height: 650px;">
    <el-aside width="200px" style="background-color: #fff;height: 550px;border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, .5);">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
      >
        <el-menu-item
            @click="goRecommend"
            :class="{ active: activeIndex === 0 }"
        >
          <img
              src="@/assets/image/all.jpg"
              style="width: 15px;height: 15px;margin-right: 5px;"
          />
        <span >全部视频</span>
        </el-menu-item>
        <el-menu-item
            v-for="(item, index) in UserList"
            :key="item.id"
            @click="goClassify(item.id)"
            :class="{ active: activeIndex === index + 1 }"
        class="animate__animated animate__backInLeft animate__delay-0.2s"
        >
        <img
            :src="item.icon"
            style="width: 15px;height: 15px;margin-right: 5px;"
        />
        <span>{{ item.typeName }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 这是主要区域 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { reqUserList, reqVedioList } from '../../api/home.js';
import { reqClassfication } from '../../api/classification.js';
import { recommendStore } from "@/store/modules/classifyCation.js";

const $router = useRouter();
const useRecommend = recommendStore();
const UserList = ref([]);
const activeIndex = ref(0); // 新增响应式变量来存储激活的菜单项索引

onMounted(async () => {
  const res = await reqUserList();
  UserList.value = res.page.list;
});

const goRecommend = async () => {
  const res = await reqVedioList();
  useRecommend.switchVedio(res.page.list);
  $router.push('/home/vedio');
  activeIndex.value = 0; // 更新激活的菜单项索引为推荐
};

const goClassify = async (id) => {
  const res = await reqClassfication(id);
  if (res.code === '20000') {
    useRecommend.switchVedio(res.list);
  } else {
    useRecommend.switchVedio([]);
  }
  activeIndex.value = id; // 更新激活的菜单项索引为当前点击的分类 id

};
</script>


<style scoped lang="less">
     ::-webkit-scrollbar {
       display: none;
}
     .active {
       background-color: #96a5a9;
     }
</style>